<template>
  <div class="box">
    <!-- 粒子效果 -->
    <Particles
      id="tsparticles"
      :particlesInit="particlesInit"
      :particlesLoaded="particlesLoaded"
      :options="options"
    />
    <div class="header">
      <img src="@/assets/images/logo.png" alt="" />
    </div>
    <el-card class="box-card">
      <div class="right-float">
        <div class="register" v-if="titleFlag == '登录'">
          <span>没有账号?</span>
          <a href="#" @click="toRegister">点击注册</a>
        </div>
        <div class="login" v-else>
          <span>已有账号?</span>
          <a href="#" @click="toLogin">点击登录</a>
        </div>
      </div>
      <h2>{{ titleFlag }}</h2>
      <el-form
        :model="userMsg"
        ref="loginForm"
        :rules="loginRules"
        label-position="left"
        label-width="80px"
      >
        <el-form-item label="用户名" prop="username">
          <el-input
            v-model="userMsg.username"
            placeholder="请输入用户名"
            prefix-icon="User"
            clearable
          />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="userMsg.password"
            type="password"
            placeholder="请输入密码"
            prefix-icon="Lock"
            show-password
            clearable
          />
        </el-form-item>
        <el-form-item
          v-if="titleFlag == '注册'"
          label="确认密码"
          prop="checkpassword"
        >
          <el-input
            v-model="userMsg.checkpassword"
            type="password"
            placeholder="请确认密码"
            prefix-icon="Lock"
            show-password
            clearable
          />
        </el-form-item>
        <!-- 验证码 -->
        <el-form-item
          prop="verifycode"
          label="验证码"
          v-if="titleFlag == '登录'"
        >
          <el-input
            v-model="userMsg.verifycode"
            placeholder="请输入验证码"
            prefix-icon="Promotion"
            class="identifyinput"
          >
          </el-input>
        </el-form-item>
        <el-form-item v-if="titleFlag == '登录'">
          <div class="identifybox">
            <div @click="refreshCode">
              <s-identify :identifyCode="identifyCode"></s-identify>
            </div>
            <el-button @click="refreshCode" type="success" text class="textbtn"
              >看不清，换一张</el-button
            >
          </div>
        </el-form-item>

        <!-- 登录或者注册按钮 -->
        <el-form-item>
          <el-button type="primary" @click="submitForm(loginForm)">{{
            titleFlag
          }}</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script setup>
//导入验证码组件
import SIdentify from "./components/CanVas.vue"
//导入粒子效果
import { useParticles } from "./hooks/useParticles"
//导入登录的hook
import { useLogin } from "./hooks/useLogin"
//粒子效果数据
const { particlesInit, particlesLoaded, options } = useParticles()
//登录数据
const {
  userMsg,
  loginRules,
  submitForm,
  loginForm,
  toRegister,
  titleFlag,
  toLogin,
  identifyCode,

  refreshCode,
} = useLogin()
</script>
<style lang="stylus" scoped>
.box
  background-image url('@/assets/images/亮蓝色.jpg')
  width 100vw
  height 100vh
  overflow hidden
  background-repeat no-repeat
  background-size 100% 100%
  .header
    img
      display block
      border-radius 20px 0 0 20px
      width 220px
  .box-card
    position relative
    background-color rgba(0,0,0,.5)
    margin 100px 580px
    width 25%
    color #fff
    .right-float
      position absolute
      right 20px
      a
        text-decoration underline
        color #409eff
    .el-button
      width 100%
      margin-top 10px
    h2
      margin-bottom 20px
    .el-form
      .el-el-form-item
      >>>.el-form-item__label
        color #fff
      >>>.el-form-item__error
        color #e74133
      .el-input
        >>>.el-input__wrapper
         background-color rgba(0,0,0,.4)
        >>>.el-input__inner
          color #fff
      .identifybox
        display flex
        justify-content space-between
        margin-top 7px
        .el-button
          margin-left 5px
</style>
